<template>
  <view class="activity">
    <template v-if="list.length">
      <view class="p-20">
        <view class="product-list">
          <view
            class="product-item"
            v-for="data in list"
            :key="data.id"
            @click="toGoodsDetail(data)"
          >
            <u-image
              :src="data.product.image_url"
              width="150rpx"
              height="150rpx"
              radius="10rpx"
            ></u-image>
            <view class="info flex flex-column justify-center items-center">
              <u-text :text="data.product.name" :lines="2"></u-text>
              <u-text
                color="#949c9f"
                size="12"
                :text="`${data.product.min_sale_quantity}${data.product.uom.name}起订 | 库存${data.skus[0].variant.stock}${data.product.uom.name}`"
              ></u-text>
              <view class="price flex items-center" style="width: 100%">
                <view class="new">
                  <text class="price">￥{{ data.skus[0].amount }}</text>
                  <text class="price"> /{{ data.product.uom.name }} </text>
                </view>
                <view class="old">
                  <text class="price"
                    >￥{{ data.skus[0].variant.sale_price }}</text
                  >
                  <text class="price"> /{{ data.product.uom.name }} </text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>

    <my-empty v-else type="activity" text="暂无促销活动"></my-empty>
  </view>
</template>

<script setup>
import { onReachBottom, onShow } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import { useStore } from "vuex";
import { promotionalGoods } from "@/common/apis/goods.js";

const store = useStore();

const props = defineProps({
  group: {
    type: String,
    default: 0,
  },
});

const list = ref([]);

const totalPage = ref(0);

const params = reactive({
  page: 1,
  size: 10,
});

async function getData(isCover = true) {
  if (props.group) {
    params.group = props.group;
  }
  const response = await promotionalGoods(params);
  if (response) {
    list.value = isCover
      ? response.records
      : list.value.concat(response.records);
    totalPage.value = response.total_page;
  }
}

function toGoodsDetail(item) {
  uni.$u.route({
    url: "/pages/goods/detail",
    params: {
      id: item.product.id,
      activityProductId: item.id,
    },
  });
}

onShow(async () => {
  await getData(true);
});

onReachBottom(async () => {
  if (params.page < totalPage.value) {
    params.page += 1;
    await getData(false);
  }
});
</script>

<style scoped lang="scss">
.activity {
  .product-list {
    .product-item {
      background-color: #fff;
      display: flex;
      border-radius: 10rpx;
      overflow: hidden;
      padding: 20rpx;
      margin-bottom: 20rpx;

      .info {
        flex: 1;
        margin-left: 20rpx;

        .price {
          .new {
            color: $u-error;
          }
          .old {
            font-size: 14px;
            text-decoration: line-through;
            color: #ccc;
          }
        }
      }
    }
  }
}
</style>
